<template>
	<view class="dibu">
		<view class="tabbar">
			<view class="tabbarH acea-row row-around">
				<view class="item acea-row row-middle row-center row-column" v-for="(item,index) in list" :key="index" @click="pathClick(item.path)">
					<view class="icon">
						<image :src="item.selicon" mode="" v-if="url==item.path"></image>
						<image :src="item.icon" mode="" v-else></image>
					</view>
					<view class="name" :class="url==item.path?'on':''">{{ item.name }}</view>
					<!-- <view class="tag acea-row row-middle row-center" v-if="index==3">	5  </view> -->
				</view>
			</view>
		</view>
		<!-- <view style="width: 100%;height: 200rpx;"></view> -->
	</view>
</template>

<script>
	export default {
		props:{
			url:{
				type: String,
				default: '/pages/index/gerencenter'
			}
		},
		data() {
			return {
				list:[
					{ 
						name:'首页',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/a82285bc828c99f06984daa843c85a0a.png',
						selicon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/976fe6e53136550edc02f510eaff7a10.png',
						path:'/pages/index/index'
					},
					{
						name:'待办',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/8a5bd403677102e8ba7b744d8eb2731d.png',
						selicon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/3f014b8e3521bdd31d2a2d338014816d.png',
						path:'/pages/index/daiban'
					},
					{
						name:'服务',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/50b8981e5d075d9a247b05deeb606a24.png',
						selicon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/42aaa03395af67e4d21dd363a140cd26.png',
						path:'/pages/index/new-serve'
					},
					{
						name:'消息',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/6d3afa54157970d47aca6556b1cecdc1.png',
						selicon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/55f060e1e46723c8d7d0f624f87ad229.png',
						path:'/pages/index/message'
					},
					{
						name:'我的',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/bcb41189341d0334b88eb572b9ba588d.png',
						selicon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/b394ff40ed2bcd2f9e0357352ee42b19.png',
						path:'/pages/index/gerencenter'
					},
				],
				
			};
		},
		methods:{
			pathClick(url){
				// if(url != '/pages/index/gerencenter') return this.$util.Tips({ title : '功能开发中' })
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabbar{
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		
		.tabbarH{
			width: 690rpx;
			height: 120rpx;
			background-color: rgba(255, 255, 255, .9);
			box-shadow: 0 0 20rpx #f2f2f2;
			border-radius: 60rpx;
			padding: 0 30rpx;
			
			.item{
				position: relative;
				
				.tag{
					position: absolute;
					top: 10rpx;
					left: 35rpx;
					background-color: #DB6052;
					width: 30rpx;
					height: 35rpx;
					border-radius: 30rpx;
					color: #ffffff;
					font-size: 14rpx;
					border: 2rpx solid #ffffff;
				}
				
				.icon{
					width: 45rpx;
					height: 45rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
				.name{
					color: #000000;
					font-size: 24rpx;
				}
				.on{
					color: #3E7CF7;
				}
			}
			
		}
		
	}

</style>
